<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 类别管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <span style="float: left;margin-bottom: 40px;margin-top: 0px">
      <template>
        <el-radio-group v-model="viewCheckState" size="medium" @change="searchCheckState">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="未审核"></el-radio-button>
          <el-radio-button label="审核通过"></el-radio-button>
          <el-radio-button label="审核未通过"></el-radio-button>
        </el-radio-group>
      </template>
    </span>
<!--    <span style="float: left">-->
<!--      <template>-->
<!--        <el-radio-group v-model="ViewEnable" size="medium" @change="searchEnable" style="margin-left: 30px">-->
<!--          <el-radio-button label="已禁用"></el-radio-button>-->
<!--          <el-radio-button label="已启用"></el-radio-button>-->
<!--        </el-radio-group>-->
<!--      </template>-->
<!--    </span>-->
    <span style="float: left;margin-left: 435px;margin-bottom: 40px;margin-top: 0px">
      <template>
        <el-input v-model="searchContent" placeholder="请输入推文标题......" style="width: 640px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchTileOrKeywords">搜索</el-button>
      </template>
    </span>

    <el-divider></el-divider>

      <el-table :data="tableData" >
        <el-table-column prop="id" label="推文ID" align="center" width="80"></el-table-column>
        <el-table-column prop="title" label="标题" align="center" width="350"></el-table-column>
        <el-table-column label="封面" align="center" width="100">
          <template slot-scope="scope">
            <img width="80" :src="scope.row.coverUrl">
          </template>
        </el-table-column>
        <el-table-column prop="keywords" label="关键词" align="center" width="220"></el-table-column>
        <el-table-column prop="state" label="审核状态" align="center" width="100">
          <template slot-scope="scope">
            <p v-show="scope.row.checkState==0" style="color: #abceee">{{ state.noChecked }}</p>
            <p v-show="scope.row.checkState==1" style="color: green">{{ state.enable }}</p>
            <p v-show="scope.row.checkState==2" style="color: red;">{{ state.disable }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="checkState" label="是否通过审核" align="center" width="350">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="changeState(scope.row,0)"
                       :disabled="scope.row.checkState==1||scope.row.checkState==2">通&nbsp过&nbsp审&nbsp核
            </el-button>
            <el-button size="mini" type="danger" @click="changeState(scope.row,1)"
                       :disabled="scope.row.checkState==1||scope.row.checkState==2">审核不通过
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
                @change="toggleEnable(scope.row)"
                v-model="scope.row.isEnable"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#999"
                :disabled="scope.row.checkState==2||scope.row.checkState==0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="发布时间" align="center" width="260"></el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="viewTweet(scope.row)">查看
            </el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="openDeleteConfirm(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="pageTotal">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchContent: '',
      viewCheckState: '全部',
      // ViewEnable: '0',
      state: {
        disable: '审核未通过',
        enable: '审核已通过',
        noChecked: '未审核'
      },
      tableData: [],
      currentPage: 1,
      pageSize:10,
      pageTotal:0
    }
  },
  methods: {
    loadTweetsList() {

      let url = "http://localhost:8091/tweets/get-allTweets/"+this.currentPage
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.pageSize=jsonResult.data.pageSize;
          this.pageTotal=jsonResult.data.total;
          console.log(this.tableData)
        }
      })
    },
    // 改变审核状态
    changeState(tweet, value) {
      let checkStateText = ['通过', '拒绝'];
      let url = "http://localhost:8091/tweets/"
      let onCheckUrl = "http://localhost:8091/tweets/get-checkState-tweets/0"
      if (value == 0) {
        url += tweet.id + '/pass-check';
      } else if (value == 1) {
        url += tweet.id + '/cancel-check';
      }
      console.log('url = ' + url);

      axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: checkStateText[value] + '审核成功!',
            type: 'success'
          });
          axios.get(onCheckUrl).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.tableData = jsonResult.data.list;
              this.pageSize=jsonResult.data.pageSize;
              this.pageTotal=jsonResult.data.total;
              console.log(this.tableData)
            }
          })
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadTweetsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // 切换启用状态
    toggleEnable(tweet) {
      let enableStateText = ['禁用', '启用'];
      let url = "http://localhost:8091/tweets/"
      if (tweet.isEnable == 0) {
        url += tweet.id + '/disable';
      } else if (tweet.isEnable == 1) {
        url += tweet.id + '/enable';
      }
      console.log('url = ' + url);
      axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
                message: enableStateText[tweet.isEnable] + '成功！',
                type: 'success'
              },
          );
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadTweetsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    viewTweet(tweet) {
      this.$router.push({path: '/admin/review/tweet', query: {id: JSON.stringify(tweet.id)}});
    },
    // 打开删除确认框
    openDeleteConfirm(tweet) {
      let message = '将永久删除此推文，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(tweet);
      }).catch(() => {
      });
    },
    // 执行删除
    handleDelete(tweet) {
      let url = "http://localhost:8091/tweets/delete-tweet/" + tweet.id;
      console.log('url = ' + url);

      axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.loadTweetsList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadTweetsList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // 查询选中审核状态的推文
    searchCheckState() {
      if (this.viewCheckState == '全部') {
        this.loadTweetsList();
      }
      if (this.viewCheckState == '未审核') {
        let url = "http://localhost:8091/tweets/get-checkState-tweets/0?page="+this.currentPage
        console.log(url)
        axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.tableData=jsonResult.data.list;
            this.pageSize=jsonResult.data.pageSize;
            this.pageTotal=jsonResult.data.total;
            console.log(this.tableData)
          }
        })
      }
      if (this.viewCheckState == '审核通过') {
        let url = "http://localhost:8091/tweets/get-checkState-tweets/1?page="+this.currentPage
        axios.get(url).then((response) => {
          console.log(url)
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.tableData = jsonResult.data.list;
            this.pageSize=jsonResult.data.pageSize;
            this.pageTotal=jsonResult.data.total;
            console.log(this.tableData)
          }
        })
      }
      if (this.viewCheckState == '审核未通过') {
        let url = "http://localhost:8091/tweets/get-checkState-tweets/2?page="+this.currentPage
        axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.tableData = jsonResult.data.list;
            this.pageSize=jsonResult.data.pageSize;
            this.pageTotal=jsonResult.data.total;
            console.log(this.tableData)
          }
        })
      }
    },
    // searchEnable() {
    //   if (this.currentPage!=1){
    //     this.currentPage=1
    //   }
    //   if (this.ViewEnable == '已禁用') {
    //     let url = "http://localhost:8091/tweets/get-enableState-tweets/0?page="+this.currentPage
    //     axios.get(url).then((response) => {
    //       let jsonResult = response.data;
    //       if (jsonResult.state == 20000) {
    //         this.tableData = jsonResult.data.list;
    //         this.pageSize=jsonResult.data.pageSize;
    //         this.pageTotal=jsonResult.data.total;
    //         console.log(this.tableData)
    //       }
    //     })
    //   }
    //   if (this.ViewEnable == '已启用') {
    //     let url = "http://localhost:8091/tweets/get-enableState-tweets/1?page="+this.currentPage
    //     axios.get(url).then((response) => {
    //       let jsonResult = response.data;
    //       if (jsonResult.state == 20000) {
    //         this.tableData = jsonResult.data.list;
    //         this.pageSize=jsonResult.data.pageSize;
    //         this.pageTotal=jsonResult.data.total;
    //         console.log(this.tableData)
    //       }
    //     })
    //   }
    // },
    handleSizeChange(page) {
      console.log(`每页 ${page} 条`);
    },
    handleCurrentChange(page) {
      this.currentPage=page
      if (this.viewCheckState=="未审核"||this.viewCheckState=="审核通过"||this.viewCheckState=="审核未通过"){
        this.searchCheckState();
        console.log(this.currentPage)
      }
      // else if (this.ViewEnable=="已禁用"||this.ViewEnable=="已启用"){
      //   this.searchEnable()
      // }
      else {
        this.loadTweetsList();
      }


      console.log(`当前页: ${page}`);
    },
    searchTileOrKeywords() {
      let url = "http://localhost:8091/tweets/search/"
      this.axios.get(url + this.searchContent).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.pageSize=jsonResult.data.pageSize;
          this.pageTotal=jsonResult.data.total;
          console.log(this.tableData)
        }
      })
    }
  },
  mounted() {
    this.loadTweetsList()
  }
}
</script>

<style scoped>

</style>
